import React, {Component} from 'react';
import LoginStyles from './index.module.scss';
import RegPanel from './components/RegPanel';
import Link from '$src/components/Link';
import {StateInterface, PropsInterface, currentType} from './types';
import LoginPanel from './components/LoginPanel';
export default class Login extends Component<PropsInterface, StateInterface> {
    state: StateInterface = {
        currentType: 'LOGIN',
    };
    toggleType = (type: currentType = 'LOGIN') => {
        this.setState({
            currentType: type,
        });
    };
    render() {
        const {currentType} = this.state;
        const panel =
            currentType === 'LOGIN' ? (
                <LoginPanel toggleType={this.toggleType} />
            ) : (
                <RegPanel toggleType={this.toggleType} />
            );
        return (
            <div className={LoginStyles.login}>
                <Link path="/">
                    <div className={LoginStyles.logo}>
                        <img src={require('$asstes/images/login/logo-block.png')} alt="" />
                    </div>
                </Link>

                <div className={LoginStyles.panel}>{panel}</div>
                <div className={LoginStyles.footer_info}>
                    <p>· Designed by · Designed by · Designed by · Designed by · Designed by</p>
                </div>
            </div>
        );
    }
}
